<template>
  <div class="widget_settings_pro">
    <ele-form-section
        v-model="formData"
        :request-fn="handleSubmit"
        :sections="sections"
        @request-success="handleSuccess"
    >
      <template v-slot:show_label1="{ desc, data, field, formData }">
        <p class="content">
          可在购买按钮下方添加文字和图片，来增强网站安全感，展示更多服务信息或产品特性等。
        </p>
      </template>
      <template v-slot:form-btn="{ btns }">
        <div class="rest-btn" @click="reset">
          <svg-icon icon-class="reset-settings"></svg-icon>
          重置配置
        </div>
      </template>
    </ele-form-section>
  </div>
</template>

<script>
import uploadFile from '@/components/Upload/uploadFile';
import {debounce, deepClone} from '@/utils/utils';
export default {
    name: 'globalSocialForm',
    props: {
        value: {
            type: Object,
            default: () => ({})
        }
    },
    watch: {
        value: {
            handler (newVal, oldVal) {
                this.formData = JSON.parse(newVal.styleJson);
            },
            immediate: false,
            deep: true
        },
        formData: {
            handler (newVal, oldVal) {
                this.pageCount++;
                if (this.pageCount !== 1) {
                    this.setData();
                }
            },
            immediate: false,
            deep: true
        }
    },
    data () {
        return {
            pageCount: 1,
            formData: this.value ? JSON.parse(this.value.styleJson) : {},
            activeNames: [],
            uploadPath: process.env.VUE_APP_BASE_API + '/upload-file',
            sections: [
                {
                    title: '社媒链接',
                    formDesc: {
                        'instagram_url': {
                            type: 'input',
                            label: 'Instagram link'
                        },
                        'facebook_url': {
                            type: 'input',
                            label: 'Facebook link'
                        },
                        'twitter_url': {
                            type: 'input',
                            label: 'Twitter link'
                        },
                        'pinterest_url': {
                            type: 'input',
                            label: 'Pinterest link'
                        },
                        'youtube_url': {
                            type: 'input',
                            label: 'Youtube link'
                        }
                        // 'checkout_pc_image': {
                        //     type: 'ele-form-upload-file',
                        //     label: '首页分享图片'
                        // },
                        // 'first_end': {
                        //     label: '分享首页到Facebook或者Twitter时展示'
                        // }
                    }
                }
            ],
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, 0.68)',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94, 0.5)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%, 0.73)'
            ]
        };
    },
    methods: {
        addPic () {
            this.formData.blocks.push({
                button_link: '',
                alignment: 'top',
                button_bg_color: '#FFFFFF',
                button_label: 'Learn More11',
                button_text_color: '#000000',
                mobile_src: '',
                opacity: 25,
                src: '',
                sub_title: 'Tell your brand\'s story through  images',
                text_color: '#FFFFFF',
                text_position: 'center_left',
                title: 'Image Slide',
                url: ''
            });
        },
        handleResponse (response, file, fileList) {
            return response;
        },
        handleSubmit (data) {
            console.log(data);
            return Promise.resolve();
        },
        handleSuccess () {
            this.$message.success('创建成功');
        },
        reset () {
            this.pageCount = 0;
            this.$emit('resetData', this.value);
        },
        setData: debounce(function () {
            let data = deepClone(this.value);
            data.styleJson = JSON.stringify(this.formData);
            this.$store.commit('SET_PROJECT_DATA', data);
        }, 600)
    }
};
</script>

<style scoped lang="scss">
.form-item-inline{
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
  color: #606266;
  height: 32px;
  margin-bottom: 10px;
}
.editForm{
  margin-bottom: 10px;
  .form-item{
    margin-top: 10px;
    label {
      display: block;
      height: 32px;
      line-height: 32px;
    }
  }
  ::v-deep .el-collapse-item__content{
    border: 1px solid #d8deec;
    border-top:0;
    padding-left: 10px;
  }
}
.addBtn{
  width: 100%;
}
.content {
  color: #666666;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-transform: initial;
  word-wrap: break-word;
  word-break: break-word;
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
  clear: both;
}
</style>
